<template>
	<view class="slot-steps">
		<view v-for="item in optionLen" :key="item" class="item-box" :style="{'margin-top':spacing}">
			<view class="column-line-box" :style="{'padding-top':offset}">
				<view class="column-circle" :style="{'margin-bottom':'calc('+spacing +' + '+ offset+')'}">{{item+1}}</view>
				<view class="column-line" v-if="optionLen!=item+1"></view>
			</view>
			<view class="slot-content">
				<slot :name="'item' + item"></slot>
			</view>
		</view>
	</view>
</template>

<script>
//
export default {
	name: 'SlotSteps',
	props: {
		optionLen: 0,
		spacing: {
			type: String,
			default: '20rpx'
		},
		offset: {
			type: String,
			default: '20rpx'
		},
	},
	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.item-box {
	display: flex;
	flex-direction: row;
}
.column-line-box {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	.column-line {
		flex: 1;
		width: 1px;
		height:calc(100% - 20rpx);
		background-color: #0595dc;
	}
	.column-circle {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: #0595dc;
		color: white;
		font-size: 28rpx;
		box-shadow: 0 2px 2px 1px darkgray;
	}
}
.slot-content {
	flex: 9;
}
</style>
